<!-- 详情的页面 -->
<template>
  <van-skeleton title :row="8" :loading="loading">
    <div class="context_box">
      <div class="task_title">{{ taskInfo.title }}</div>
      <div class="task_tabs flex">
        <!-- <div class="task_tabs_in cenFlex">新任务</div> -->
        <div class="task_tabs_in cenFlex">
          <div class="img">
            <img src="@/assets/img/index_icon17.png" alt />
          </div>
          <div class="txt">截止日期为：{{ taskInfo.endTime }}</div>
        </div>
        <div class="task_tabs_in cenFlex cenFlex">
          <div class="img">
            <img src="@/assets/img/index_icon16.png" alt />
          </div>
          <div class="txt">
            {{ taskInfo.score }}积分<span v-if="taskInfo.scoreType == 1"
              >/{{ taskInfo.scoreUnit || "次" }}</span
            >
          </div>
        </div>
        <div class="task_tabs_in cenFlex" v-if="taskInfo.examine == 1">
          需要通过审核才能领取
        </div>
      </div>
      <div class="task_content">
        <div class="task_content_title">任务详情</div>
        <div class="task_content_warp">{{ taskInfo.detail }}</div>
      </div>
      <div class="task_self">
        <div class="task_self_in flex">领取人：{{ progress.username }}</div>
        <!-- <div class="task_self_in flex">学校：{{progress.username}}</div> -->
        <div class="task_self_in flex">
          可获取积分：{{ taskInfo.score }}积分
          <span v-if="taskInfo.scoreType == 1"
            >/{{ taskInfo.scoreUnit || "次" }}</span
          >
        </div>
        <div class="task_self_in flex">
          任务截止时间：{{ taskInfo.endTime }}
        </div>
        <div
          class="task_self_in flex"
          v-if="taskInfo.enclosure"
          style="margin-top: 10px"
        >
          <div style="margin-bottom: 5px">附件：</div>

          <div
            v-down="item"
            class="cenFlex task_self_in_btn obox"
            v-for="(item, i) in taskInfo.enclosure.split(',')"
            :key="i"
          >
            <div class="img cenFlex">
              <img src="@/assets/img/index_icon18.png" alt />
            </div>
            <div class="txt">
              {{ item.replace("https://dsimg.chnnice.com/hr/", "") }}
            </div>
          </div>
        </div>
        <div
          class="task_self_in"
          v-if="taskInfo.enclosure && isWx"
          style="font-size: 10px; color: #999"
        >
          当前环境不支持下载附件，请复制链接至自带浏览器或第三方浏览器下载
        </div>
      </div>
      <div class="task_self_img">
        <div class="task_self_img_title sbFlex">
          <div>任务完成图片</div>
          <div>{{ imgArr.length }}/9</div>
        </div>
        <div class="task_self_img_box flex">
          <div
            class="task_self_img_box_img"
            v-for="(item, i) in imgArr"
            :key="i"
          >
            <images
              :url="item.content"
              @show="imagePreviewFn(i)"
              :disabled="true"
            ></images>
          </div>
        </div>
      </div>
      <div class="reg_middle_img">
        <div class="reg_middle_img_title">备注</div>
        <div class="reg_middle_bottom obox">
          {{ remark }}
        </div>
      </div>
    </div>
  </van-skeleton>
</template>

<script>
import { ImagePreview } from "vant";
import api from "@/api/task";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    imgUpdate: (resolve) => require(["@/components/imgUpdate.vue"], resolve),
    images: (resolve) => require(["@/components/images.vue"], resolve),
  },
  data() {
    //这里存放数据
    return {
      imgArr: [],
      imagePreviewArr: [],
      id: this.$route.query.id,
      taskInfo: {},
      progress: {},
      remark: "",
      loading: true,
      isWx: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    imgArr(val) {
      this.imagePreviewArr = val.map((img) => img.content);
    },
  },
  //方法集合
  methods: {
    beforeRead(file) {
      // console.log(file);
      this.imgArr = [...this.imgArr, ...file];
    },
    // 初始获取任务详情
    getInit() {
      api.apiTaskListId(this.id).then((res) => {
        this.loading = false;
        if (res.code == 0) {
          this.taskInfo = res.data.mission;
          this.progress = res.data.progress;
          this.remark = res.data.progress.remark;
          let oldImg = res.data.progress.picture.split(",");
          let newImg = [];
          oldImg.forEach((item) => {
            let _obj = {
              content: item,
              file: item,
            };
            newImg.push(_obj);
          });
          this.imgArr = newImg;
        }
      });
    },
    // 点击删除图片
    delImg(i) {
      this.imgArr.splice(i, 1);
    },
    imagePreviewFn(i) {
      ImagePreview({
        images: this.imagePreviewArr,
        startPosition: i,
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (localStorage.getItem("isWx")) {
      this.isWx = true;
    }
    this.getInit();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.context_box {
  padding: 30px 20px;

  .task_title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
  }
  .task_tabs {
    flex-wrap: wrap;
    margin: 20px 0px;
    margin-bottom: 10px;
    .task_tabs_in {
      padding: 8px 15px;
      border-radius: 20px;
      background: #dde5ef;
      color: #203039;
      font-size: 12px;
      margin-right: 15px;
      margin-bottom: 15px;
      .img {
        width: 20px;
        margin-right: 5px;
      }
    }
  }
  .task_content {
    color: $nicegray;
    line-height: 1.5;
  }
  .task_btn {
    height: 54px;
    width: 100%;
    margin-top: 50px;
  }
  .task_self {
    margin-top: 20px;
    line-height: 1.5;
    font-size: 14px;
    .task_self_in {
      flex-wrap: wrap;
    }
    .task_self_in_btn {
      background: $niceblue;
      color: #fff;
      font-size: 12px;
      padding: 1px 8px;
      margin-right: 10px;
      margin-bottom: 5px;
      .img {
        width: 11px;
        margin-right: 5px;
      }
    }
  }
  .task_self_noPass {
    color: $nicered;
    font-size: 14px;
    margin: 20px 0px;
  }
  .task_self_img {
    padding-top: 15px;
    .task_self_img_title {
      font-size: 14px;
      margin-bottom: 15px;
    }
    .task_self_img_box {
      flex-wrap: wrap;
      .task_self_img_box_img {
        width: 30%;
        height: 100px;
        margin-right: 4.5%;
        margin-bottom: 15px;
        &:nth-child(3n) {
          margin-right: 0%;
        }
      }
    }
  }
  .reg_middle_img {
    font-size: 16px;
    // color: $grayColor;
    padding: 20px 0px;
    font-size: 14px;
    .reg_middle_bottom {
      margin-top: 10px;
      line-height: 1.5;
    }
  }
}
</style>